<accordion-group
  ng-init="stage.isopen = true"
  is-open="stage.isopen"
  class="accordion-navigation stages">
  <accordion-heading class="title-wrapper">
    <h2 class="title" id="stages">
      <%= t('.title') %>
      <i class="right" ng-class="{'fa fa-angle-down': true, 'open': stage.isopen}"></i>
    </h2>
  </accordion-heading>
  <div class="box"
    ng-if="guide.stages.length === 0">
    <div class="row">
      <div class="small-12 columns empty">
        <i class="fa fa-thumbs-down"></i>
        <br/>
        <%= t('.no_stages_yet') %>
      </div>
    </div>
  </div>
  <tabset class="tabs stages"
    of-sticky
    of-sticky-child=".tabs"
    of-sticky-offset="70">

    <tab ng-repeat="stage in guide.stages | orderBy:'order'">
      <tab-heading href="#instructions-{{ stage.slug }}" class="tab-heading">
        <h3>{{ stage.name }}</h3>
      </tab-heading>

      <div of-show-guide-stages
        stage="stage"
        can-edit="currentUser.id === guide.user.id"
        trigger-guide-update="guideUpdate"
        detail-options="options"
        class="columns small-12"
        s3-bucket="'<%= ENV['S3_BUCKET_NAME'] %>'">

      </div>
    </tab><tab class="add-stage" heading="+ Add New Stages" ng-if="currentUser.id === guide.user.id">
      <div of-show-add-stage-to-guide
        existing-stages="guide.stages"
        guide-id="guide.id">
      </div>
    </tab>
  </tabset>
</accordion-group>
